<template>
	<view>
		<view class="header">
			<view class="head">
				<view class="logo">
					<image src="../../static/discover/logo.png" class="logo-image"></image>
				</view>
				<view class="title"><text>社区</text></view>
				<view class="icons">
					<image src="../../static/discover/xinxi.png" class="icon-image"></image>
					<image src="../../static/discover/tianjia1.png" class="icon-image"></image>
				</view>
			</view>
			
			<view class="search">
				<input type="text" class="search-input"  style=" text-align:center" placeholder="搜索相关内容" placeholder-style="color:#CCCCCC;font-size:25rpx;text-align: center;"/>
			</view>
			
			<view class="guanzhu">
				<view class="nav">
					<view class="nav-li" v-for="item in nav" :key="item.id" @tap="change(item.name)" :class="{active:current==item.name}">{{item.name}}</view>
				</view>
				
				<view class="swiperbox">
					<swiper class="swiper"  next-margin="200rpx" snap-to-edge='true'>
						<swiper-item>
							<view class="swiper-item1">
								<view class="jianmianli">
									<image class="jianmianli-image" src="../../static/discover/jinbi.png"></image>
									<text class="jianmianli-text">开工见面礼</text>
								</view>
								<view class="niunian">
									<text>牛年开工大吉领红包</text>
								</view>
								<view class="shipan"> 
									<text>晒实盘</text><text>红包翻倍</text>
								</view>
								<view class="join">
									<text>立即参与</text>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item2">
								<view class="jianmianli">
									<image class="jianmianli-image" src="../../static/discover/jinbi2.png"></image>
									<text class="jianmianli-text1">牛年买牛基</text>
								</view>
								
								<view class="niunian">
									<text>有奖征文</text>
								</view>
								
								<view class="shipan"> 
									<text>分享你最好看的基金</text>
								</view>
								
								<view class="join1">
									<text>立即参与</text>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				
				<view class="yindao">
					<view class="yindao-box">
						<view class="yindao-item1"></view>
						<view class="yindao-item"></view>
						<view class="yindao-item"></view>
					</view>
				</view>
			</view>
		</view>
		
		
		
		
		<view class="main">
			<view class="main-item">
				<view class="main-item-head">
					<view class="main-item-head-box">
						<view class="main-item-head-logo"></view>
						<view class="main-item-head-name">
							<view>
									<text class="dijia">迪迦奥特曼</text><text class="cailing">财龄1年</text>
							</view>
							<view class="main-item-head-time">
								04-10 16:46:33
							</view>
						</view>
					</view>
					
					<view class="check">
						<text>关注</text><image src="../../static/discover/guanzhu.png" class="check-image"></image>
					</view>
				</view>
				
				<view class="miaosu">
						<text>春节后基金连续下跌2日,还好有稳固收益呀!</text>
				</view>
				
				<view class="biaoqian">
					<text class="biaoqian-text">#实盘秀</text><text class="biaoqian-text">#投资心得</text><text class="biaoqian-text">#牛年买牛基</text>
				</view>
				
				<view class="image-box">
					<image src="../../static/discover/shaitu1.png" class="image-box-item"></image>
					<image src="../../static/discover/shaitu2.png" class="image-box-item"></image>
					<image src="../../static/discover/shaitu3.png" class="image-box-item"></image>
				</view>
				
				<view class="jijin">
					<image src="../../static/discover/shangsheng.png" class="jijin-image"></image><text class="jijin-name">景顺长城鼎益混合型证...</text><text class="jijin-shouyi">+21.18%</text>
				</view>
				
				<view class="sanlianbox">
					<view class="fenxiang" @tap="fenxiang()">
							<image src="../../static/discover/fenxiang.png" class="sanlian-image"></image><text>分享</text>
					</view>
					<view class="pinglun">
						<image src="../../static/discover/pinglun.png" class="sanlian-image"><text>9250</text>
					</view>
					<view class="dianzan">
						<image src="../../static/discover/dianzan.png" class="sanlian-image"></image><text>1029</text>
					</view>
				</view>
			</view>
			
			<view class="main-item">
				<view class="main-item-head">
					<view class="main-item-head-box">
						<view class="main-item-head-logo1"></view>
						<view class="main-item-head-name">
							<view>
									<text class="dijia">赛文奥特曼</text><text class="cailing">财龄1年</text>
							</view>
							<view class="main-item-head-time">
								04-10 16:46:33
							</view>
						</view>
					</view>
					
					<view class="check1">
						<text>取消关注</text>
					</view>
				</view>
				
				<view class="miaosu">
						<text>今日大盘点评:大盘比预想的强势,当日就进行了修复,收下影线。微盘对港基进行少量补仓,仓位一百万。目前看春季行情还在继续。近期货币政...</text>
				</view>
				
				<view class="biaoqian">
					<text class="biaoqian-text">#实盘秀</text><text class="biaoqian-text">#牛年买牛基</text>
				</view>
				
				<view class="image-box">
					<image src="../../static/discover/baijiu1.png" class="image-box-item"></image>
					<image src="../../static/discover/baijiu2.png" class="image-box-item"></image>
				</view>
				
				<view class="jijin">
					<image src="../../static/discover/shangsheng.png" class="jijin-image"></image><text class="jijin-name">招商中证白酒指数(LJ...</text><text class="jijin-shouyi">+21.18%</text>
				</view>
				
				<view class="sanlianbox">
					<view class="fenxiang">
							<image src="../../static/discover/fenxiang.png" class="sanlian-image"></image><text>分享</text>
					</view>
					<view class="pinglun">
						<image src="../../static/discover/pinglun.png" class="sanlian-image"><text>8560</text>
					</view>
					<view class="dianzan">
						<image src="../../static/discover/dianzan.png" class="sanlian-image"></image><text>999</text>
					</view>
				</view>
			</view>
			
			<view class="findman">
				<text>帮你发现更有趣的人</text>
			</view>
			
			<view class="funman">
				<view class="man">
					<image src="../../static/discover/touxiang1.png" class="man-logo"></image>
					<text class="man-name">蒲嘉伟</text>
					<text class="man-jieshao">韭菜协会会长</text>
					<view class="man-guanzhu">+关注</view>
				</view>
				
				<view class="man">
					<image src="../../static/discover/touxiang2.png" class="man-logo"></image>
					<text class="man-name">罗靓</text>
					<text class="man-jieshao">常年基金亏损人员</text>
					<view class="man-guanzhu">+关注</view>
				</view>
				
				<view class="man">
					<image src="../../static/discover/touxiang3.png" class="man-logo"></image>
					<text class="man-name">黄建飞</text>
					<text class="man-jieshao">资深基金爱好者</text>
					<view class="man-guanzhu">+关注</view>
				</view>
				
			</view>
			
			<view class="main-item">
				<view class="main-item-head">
					<view class="main-item-head-box">
						<view class="main-item-head-logo2"></view>
						<view class="main-item-head-name">
							<view>
								<text class="dijia">奥特之父</text><text class="cailing">财龄1年</text>
							</view>
							<view class="main-item-head-time">
								04-10 16:46:33
							</view>
						</view>
					</view>
					
					<view class="check">
						<text>关注</text><image src="../../static/discover/guanzhu.png" class="check-image"></image>
					</view>
				</view>
				
				<view class="miaosu">
						<text>这个月的余量不多啦，哈哈!</text>
				</view>
				
				<view class="biaoqian">
					<text class="biaoqian-text">#实盘秀</text><text class="biaoqian-text">#投资心得</text><text class="biaoqian-text">#牛年买牛基</text>
				</view>
				
				<view class="image-box">
					<image src="../../static/discover/shaitu1.png" class="image-box-item"></image>
					<image src="../../static/discover/shaitu2.png" class="image-box-item"></image>
					<image src="../../static/discover/shaitu3.png" class="image-box-item"></image>
				</view>
				
				<view class="jijin">
					<image src="../../static/discover/shangsheng.png" class="jijin-image"></image><text class="jijin-name">景顺长城鼎益混合型证...</text><text class="jijin-shouyi">+21.18%</text>
				</view>
				
				<view class="sanlianbox">
					<view class="fenxiang">
							<image src="../../static/discover/fenxiang.png" class="sanlian-image"></image><text>分享</text>
					</view>
					<view class="pinglun">
						<image src="../../static/discover/pinglun.png" class="sanlian-image"><text>7140</text>
					</view>
					<view class="dianzan">
						<image src="../../static/discover/dianzan.png" class="sanlian-image"></image><text>798</text>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nav:[
					{id:1,name:'关注'},
					{id:2,name:'推荐'},
					{id:3,name:'圈子'},
					{id:4,name:'视频'},
					{id:5,name:'直播'},
				],
				current:"推荐"
			}
		},
		methods: {
			change(name){
				this.current = name
			},
			fenxiang(){
				uni.share({
					provider:'weixin',
					type:1,
					scene:'WXSenceTimeline',
					summary:'我发现了一支很好的基金。',
					success:res=> {
						console.log("success",res);
					},
					fail:res=>{
						console.log("fail",res);
					}
					
				})
			}
		}
	}
</script>

<style scoped>
	.swiper{
		
	}
	.header{
		width: 750rpx;
		padding-top: 10rpx;
		background-color: #007AFF;
	}
	.head{
		height: 72rpx;
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	.logo-image{
		width: 72rpx;
		height: 72rpx;
	}
	.title{
		color: #FFFFFF;
		height: 72rpx;
		line-height: 72rpx;
		font-weight: bold;
	}
	.icons{
		width: 110rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		justify-content: space-between;
	}
	.icon-image{
		width: 45rpx;
		height: 45rpx;
	}
	.search{
		width: 700rpx;
		height: 60rpx;
		margin: 20rpx auto;
		position: relative;
	}
	.search-input{
		width: 700rpx;
		height: 60rpx;
		background-color: #FFFFFF;
		border-radius: 50rpx;
	}
	.search-input::before{
		content: "";
		width: 25rpx;
		height: 25rpx;
		background-image: url(../../static/discover/search.png);
		background-size: cover;
		position: absolute;
		left: 240rpx;
		top:18rpx;
	}
	.guanzhu{
		width: 750rpx;
		height: 400rpx;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		background-color: #FFFFFF;
		overflow: hidden;
	}
	.nav{
		width: 700rpx;
		height: 50rpx;
		/* background-color: #CCCCCC; */
		margin: 30rpx auto;
		display: flex;
		justify-content: space-evenly;
	}
	.nav-li{
		color: #999999;
		width: 110rpx;
		height: 50rpx;
		text-align: center;
		border-radius: 10rpx;
		font-size: 28rpx;
		line-height: 50rpx;
	}
	.active{
		color: #FFFFFF;
		background-color: #007AFF;
	}
	.swiperbox{
		width: 700rpx;
		margin: 0 auto;
	}
	.swiper{
		width: 750rpx;
		height: 248rpx;
		/* background-color: #2C405A; */
	}
	.swiper-item1{
		width: 482rpx;
		height: 248rpx;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		background-image: url(../../static/discover/qiandaizi.png);
		background-size: cover;
	}
	.swiper-item2{
		width: 482rpx;
		height: 248rpx;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		background-image: url(../../static/discover/bi.png);
		background-size: cover;
	}
	.jianmianli{
		height: 40rpx;
	}
	.jianmianli-image{
		height: 30rpx;
		width: 30rpx;
		margin-right: 8rpx;
	}
	.jianmianli-text{
		font-size: 26rpx;
		vertical-align: top;
		color: #dcb984;
	}
	.jianmianli-text1{
		font-size: 26rpx;
		vertical-align: top;
		color: #8bceda;
	}
	.niunian{
		font-size: 28rpx;
		margin: 10rpx 0;
	}
	.shipan{
		font-size: 24rpx;
		margin-bottom: 25rpx;
	}
	.join{
		width: 168rpx;
		height: 52rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		background-color: #be7f22;
		border-radius: 50rpx;
		text-align: center;
		line-height: 52rpx;
	}
	.join1{
		width: 168rpx;
		height: 52rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		background-color: #53B6C8;
		border-radius: 50rpx;
		text-align: center;
		line-height: 52rpx;
	}
	.yindao{
		width: 700rpx;
		height: 30rpx;
		/* background-color: #007AFF; */
		margin: 20rpx auto;
		display: flex;
		justify-content: center;
	}
	.yindao-box{
		display: flex;
		width: 85rpx;
		height: 8rpx;
		justify-content: center;
		align-items: center;
		justify-content: space-between;
	}
	.yindao-item{
		width: 20rpx;
		height: 4rpx;
		background-color: #CCCCCC;
		
	}
	.yindao-item1{
		width: 30rpx;
		height: 5rpx;
		background-color: #007AFF;
		
	}
	.main{
		
	}
	.main-item{
		margin: 0 auto;
		margin-bottom: 20rpx;
		width: 700rpx;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 10rpx;
		border: 2rpx solid #f4f4f4;
	}
	.main-item-head{
		display: flex;
		justify-content: center;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}
	.main-item-head-box{
		display: flex;
	}
	.main-item-head-logo{
		width: 72rpx;
		height: 72rpx;
		background-image: url(../../static/discover/dijia.png);
		background-size: cover;
		margin-right: 10rpx;
	}
	.main-item-head-logo1{
		width: 72rpx;
		height: 72rpx;
		background-image: url(../../static/discover/saiwen.png);
		background-size: cover;
		margin-right: 10rpx;
	}
	.main-item-head-logo2{
		width: 72rpx;
		height: 72rpx;
		background-image: url(../../static/discover/aotezhifu.png);
		background-size: cover;
		margin-right: 10rpx;
	}
	.dijia{
		font-size: 28rpx;
		margin-right: 10rpx;
		margin-bottom: 6rpx;
	}
	.cailing{
		width: 90rpx;
		height: 30rpx;
		background-color: #fcf5ec;
		color: #c68e3c;
		font-size: 20rpx;
	}
	.main-item-head-time{
		font-size: 24rpx;
		color: #CCCCCC;
	}
	.check{
		width: 110rpx;
		height: 45rpx;
		border: 2rpx solid #efefef;
		border-radius: 10rpx;
		color: #9abbf8;
		display: flex;
		justify-content: center;
		align-items: center;
		justify-content: space-evenly;
	}
	.check1{
		width: 136rpx;
		height: 48rpx;
		border: 2rpx solid #CCCCCC;
		color: #CCCCCC;
		text-align: center;
		line-height: 48rpx;
		border-radius: 50rpx;
		font-size: 27rpx;
	}
	.check-image{
		width: 30rpx;
		height: 30rpx;
	}
	.miaosu{
		letter-spacing:2rpx;
		/* font-size: 30rpx; */
	}
	.biaoqian{
		color: #007AFF;
		font-size: 28rpx;
		margin: 16rpx 0;
	}
	.biaoqian-text{
		margin-right: 20rpx;
	}
	.image-box{
		display: flex;
		margin-bottom: 20rpx;
	}
	.image-box-item{
		width: 204rpx;
		height: 272rpx;
		border-radius: 5rpx;
		margin-right: 20rpx;
	}
	.jijin{
		width: 430rpx;
		height: 50rpx;
		background-color: #eaf1fe;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		justify-content: space-evenly;
		margin-bottom: 36rpx;
	}
	.jijin-name{
		font-size: 25rpx;
	}
	.jijin-shouyi{
		font-size: 25rpx;
		color: #f57e81;
	}
	.jijin-image{
		width: 30rpx;
		height: 30rpx;
	}
	.sanlianbox{
		display: flex;
	}
	.fenxiang{
		text-align: center;
		flex-grow: 1;
		font-size: 24rpx;
		color: #c2c2c2;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.pinglun{
		text-align: center;
		flex-grow: 1;
		font-size: 24rpx;
		color: #c2c2c2;
		border-left:3rpx solid  #c2c2c2;
		border-right:3rpx solid  #c2c2c2;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.dianzan{
		text-align: center;
		flex-grow: 1;
		font-size: 24rpx;
		color: #c2c2c2;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.sanlian-image{
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}
	.findman{
		width: 700rpx;
		height: 40rpx;
		margin: 30rpx auto;
		box-sizing: border-box;
		padding: 0 20rpx;
		border-left:9rpx solid #007AFF ;
		
	}
	.funman{
		width: 700rpx;
		height: 325rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
	}
	.man{
		width: 220rpx;
		height: 325rpx;
		/* background-color: #CCCCCC; */
		border: 2rpx solid #f4f4f4;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;
	}
	.man-logo{
		width: 108rpx;
		height: 108rpx;
	}
	.man-name{
		font-size: 35rpx;
		font-weight: bold;
	}
	.man-jieshao{
		font-size: 26rpx;
	}
	.man-guanzhu{
		width: 142rpx;
		height: 52rpx;
		background-color: #007AFF;
		text-align: center;
		line-height: 52rpx;
		color: #FFFFFF;
		border-radius: 10rpx;
	}
</style>
